Solar Animation

Home / Web Code Snippet / Solar Animation

Solar Animation

https://youtube.com/shorts/fcuGIfNZoVQ?si=GDOb-R5wh84jh5zT

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
  <div class="container">
    <div class="sun">
      <div class="earth">
        <div class="moon"></div>
      </div>
    </div>
  </div>
</body>
</html>

CSS CODE:-

body{
            margin: 0;
            padding: 0;
            background: black;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        .container{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: transparent;
        }
        .container .sun{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: #ffcc00;
            box-shadow:0 0 40px #ffcc00;
            animation: sun 3s linear infinite;
        }
        @keyframes sun{
            0%{
               box-shadow:0 0 80px #ffcc00;
            }
        }
        .container .sun .earth{
            position: absolute;
            top: calc(50% - 1px);
            left: 50%;
            width: 200px;
            height: 2px;
            transform-origin:left;
            animation: animate 10s linear infinite;
        }
        .container .sun .earth:before{
            content: "";
            background: #72cdfa;
            position: absolute;
            top: -25px;
            right: 0;
            width: 60px;
            height:60px;
            border-radius: 50%;
            box-shadow: 0 0 20px #72cdfa;
            animation: animate 10s linear infinite;
        }
        .container .sun .earth .moon{
            position: absolute;
            right: 25px;    
            width: 60px;
            height: 1px;
            transform-origin: right;
            animation: animate 2s linear infinite
        }
        .container .sun .earth .moon:before{
            content: "";
            position: absolute;
            top: -10px;
            width: 20px;
            height: 20px;
            background: #ccc;
            box-shadow: 0 0 10px #ccc;
            border-radius: 50%;
        }
        @keyframes animate{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }